<template>
  
    <div class="view-frame">
      <div  class="view-head">
                  <el-breadcrumb separator="/">
                    <el-breadcrumb-item>用户</el-breadcrumb-item>
                    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                  </el-breadcrumb>
      </div>
      <div class="view-body">
        <div class="view-body-main">
          <portlet name="用户管理">
            <el-row>
              <el-col :span="24">
                <el-row :gutter="5">
                  <el-col :span="6">
                    <el-input v-model="name" placeholder="请输入用户名"></el-input>
                  </el-col>
                  <el-col :span="2">
                    <el-button  icon="search" type="primary"  @click="search">查询</el-button>
                  </el-col>
                  <el-col :span="2">
                    <el-button icon="plus" type="primary" @click="dialogFormVisible = true">新增</el-button>
                  </el-col>
                  <el-col :span="2">
                    <el-button  icon="edit"  type="primary" @click="update">修改</el-button>
                  </el-col>
                  <el-col :span="4">
                    <el-button  icon="share"  type="primary" @click="payManage">支付渠道管理</el-button>
                  </el-col>
                 
                </el-row>
                <el-row>
                  
                </el-row>
                <el-row>
                  <el-col :span="24">
                      <el-table
                       
                        ref="table"
                        v-loading="loading"
                        :data="tableData"
                        style="width: 100%"
                        highlight-current-row
                        @current-change="handleTableChange">
                        <el-table-column
                          prop="merchantName"
                          label="商户名称"
                          width="100">
                        </el-table-column>
                        <el-table-column
                          prop="login_name"
                          label="登陆名称"
                          width="100">
                        </el-table-column>
                        <el-table-column
                          prop="shortName"
                          width="100"
                          label="商户简称">
                        </el-table-column>
                        <el-table-column
                          prop="merchantAddress"
                          width="100"
                          label="商户地址">
                        </el-table-column>
                        <el-table-column
                          prop="servicePhone"
                          width="100"
                          label="客服电话">
                        </el-table-column>
                        <el-table-column
                          prop="category"
                          width="100"
                          label="经营类目">
                        </el-table-column>
                        <el-table-column
                          prop="idCard"
                          width="100"
                          label="商户身份证信息">
                        </el-table-column>
                        <el-table-column
                          prop="accNo"
                          width="100"
                          label="收款人账户号">
                        </el-table-column>
                        <el-table-column
                          prop="accName"
                          width="100"
                          label="收款人账户名">
                        </el-table-column>
                        <el-table-column
                          prop="bankType"
                          width="100"
                          label="收款人账户联行号">
                        </el-table-column>
                        <el-table-column
                          prop="bankName"
                          width="100"
                          label="收款人账户开户行名称">
                        </el-table-column>
                        <el-table-column
                          prop="del_flag"
                          width="100"
                          label="解冻">
                          <template scope="scope">
                            <span v-if='scope.row.del_flag==0'>解冻</span>
                            <span v-if='scope.row.del_flag==1'>冻结</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="create_date"
                          width="100"
                          label="创建时间">
                        </el-table-column>
                        <el-table-column
                          prop="create_user"
                          width="100"
                          label="创建用户">
                        </el-table-column>
                        
                      </el-table>
                      <div class="table-footer">
                          <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="rows"
                            layout="total, sizes, prev, pager, next"
                            :total="total">
                          </el-pagination>
                      </div>
                        
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </portlet>
        </div>
      </div>
      <el-dialog title="新增用户" v-model="dialogFormVisible">
        <el-form :model="form">
        <el-row :gutter="20">
                <el-col :span="20">
                  <el-form-item label="商户名称:" label-width="100px">
                       <el-input v-model="form.merchantName" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="登陆名称:" label-width="100px">
                       <el-input v-model="form.login_name" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="商户简称:" label-width="100px">
                       <el-input v-model="form.shortName" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="商户地址:" label-width="100px">
                       <el-input v-model="form.merchantAddress" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="客服电话:" label-width="100px">
                       <el-input v-model="form.servicePhone" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="经营类目:" label-width="100px">
                       <el-input v-model="form.category" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="商户身份证信息:" label-width="100px">
                       <el-input v-model="form.idCard" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="收款人账户号:" label-width="100px">
                       <el-input v-model="form.accNo" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="收款人账户名:" label-width="100px">
                       <el-input v-model="form.accName" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="收款人账户联行号:" label-width="100px">
                       <el-input v-model="form.bankType" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="收款人账户开户行名称:" label-width="100px">
                       <el-input v-model="form.bankName" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="是否解冻:" label-width="100px">
                       <el-radio-group v-model="form.del_flag">
                        <el-radio :label="0">解冻</el-radio>
                        <el-radio :label="1">冻结</el-radio>
                      </el-radio-group>
                  </el-form-item>
                </el-col>
             </el-row>
          
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="修改用户" v-model="dialogForm1Visible">
        <el-form :model="form1">
        <el-row :gutter="20">
                <el-col :span="20">
                  <el-form-item label="商户名称:" label-width="100px">
                       <el-input v-model="form1.merchantName" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="登陆名称:" label-width="100px">
                       <el-input v-model="form1.login_name" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="商户简称:" label-width="100px">
                       <el-input v-model="form1.shortName" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="商户地址:" label-width="100px">
                       <el-input v-model="form1.merchantAddress" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="客服电话:" label-width="100px">
                       <el-input v-model="form1.servicePhone" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="经营类目:" label-width="100px">
                       <el-input v-model="form1.category" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="商户身份证信息:" label-width="100px">
                       <el-input v-model="form1.idCard" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="收款人账户号:" label-width="100px">
                       <el-input v-model="form1.accNo" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="收款人账户名:" label-width="100px">
                       <el-input v-model="form1.accName" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="收款人账户联行号:" label-width="100px">
                       <el-input v-model="form1.bankType" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="收款人账户开户行名称:" label-width="100px">
                       <el-input v-model="form1.bankName" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="是否解冻:" label-width="100px">
                       <el-radio-group v-model="form1.del_flag">
                        <el-radio :label="0">解冻</el-radio>
                        <el-radio :label="1">冻结</el-radio>
                      </el-radio-group>
                  </el-form-item>
                </el-col>
             </el-row>      
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogForm1Visible = false">取 消</el-button>
          <el-button type="primary" @click="update1">确 定</el-button>
        </div>
      </el-dialog>
      
      <el-dialog title="商户列表" v-model="dialogMenuOperate">
          
          <el-table
            ref="table"
            :data="data2"
            style="width: 100%"
            highlight-current-row
            @current-change="handleTableChange2">
            <el-table-column
              prop="merchant_id"
              label="商户ID">
            </el-table-column>
             <el-table-column
              prop="merchantId"
              label="合作方商户编码">
            </el-table-column>
            <el-table-column
              prop="merchantCode"
              label="银行商户编码">
            </el-table-column>
          </el-table>
          <el-row>
            <el-col :span="6">
              <el-button icon="plus" type="primary" @click="newTable = true">新增</el-button>
            </el-col>
            <el-col :span="6">
              <el-button  icon="edit"  type="primary" @click="bChangeTable">修改</el-button>
            </el-col>
          </el-row>
      </el-dialog>
      <el-dialog title="增加支付渠道" v-model="newTable">
        <el-row>
          <el-col :span="24">
            
            <el-form :model="form3">
              <el-form-item label="合作方商户编码" label-width="70px">
                <el-input v-model="form3.merchantId" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="银行商户编码" label-width="70px">
                <el-input v-model="form3.merchantCode" auto-complete="off"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <el-col :span="24">
                <el-button @click="newTable = false">取 消</el-button>
                <el-button type="primary" @click="addTable">确 定</el-button>
              </el-col>
            </el-row>
            
          </el-col>
        </el-row>
      </el-dialog>
      <el-dialog title="修改支付渠道" v-model="chTable">
        <el-row>
          <el-col :span="24">
            <el-form :model="form4">
               <el-form-item label="合作方商户编码" label-width="70px">
                <el-input v-model="form4.merchantId" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="银行商户编码" label-width="70px">
                <el-input v-model="form4.merchantCode" auto-complete="off"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <el-col :span="24">
                <el-button @click="chTable = false">取 消</el-button>
                <el-button type="primary" @click="changeTable">确 定</el-button>
              </el-col>
            </el-row>
            
          </el-col>
        </el-row>
      </el-dialog>

    </div>
</template>
<script>
    import _default from "./index.js";
    import './index.scss';
    export default _default;
</script>

